<template>
  <div class="body">
    <div class="hot">
      <p>热门楼盘</p>
      <Rank :arr="hotList" />
    </div>
    <div class="buy">
      <p>导购排行</p>
      <Rank :arr="buyList" />
    </div>
    <div class="news">
      <p>实时动态</p>
      <div class="newsBox">
        <div class="newsBoxOut">
          <NewsBox :arr="newsList" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import Rank from '@/components/firstBody/rank.vue'
import NewsBox from '@/components/firstBody/newBoxItem.vue'
export default defineComponent({
  components: {
    Rank,
    NewsBox
  },
  setup () {
    const hotList = ref([
      '招商·奥体公园',
      '保利紫云',
      '融创邦泰云起星辰',
      '保利招商时光印象',
      '伟星．玖樾台',
      '置地栢悦书香 | 天境',
      '置地栢悦书香 | 天境',
      '置地栢悦书香 | 天境',
      '置地栢悦书香 | 天境',
      '龙湖上城'
    ])
    const buyList = ref([
      '招商·奥体公园',
      '保利紫云',
      '融创邦泰云起星辰',
      '保利招商时光印象',
      '伟星．玖樾台',
      '置地栢悦书香 | 天境',
      '置地栢悦书香 | 天境',
      '置地栢悦书香 | 天境',
      '置地栢悦书香 | 天境',
      '龙湖上城'
    ])
    const newsList = ref([
      {
        id: 1,
        time: '08-04',
        list: [
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年',
          '长安城价格7800元/平米，产权年限普通住宅：70年'
        ]
      }
    ])
    return {
      hotList,
      buyList,
      newsList
    }
  }
})
</script>

<style lang='less' scoped>
.body {
  display: flex;
  width: 1180px;
  margin-top: 24px;
  margin-bottom: 135px;
  .hot,
  .buy,
  .news {
    flex: 3;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .hot {
    padding-right: 20px;
    border-right: 1px solid #ededed;
  }
  .buy {
    width: 367px;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px solid #ededed;
  }
  .news {
    margin-left: 20px;
    .newsBox {
      overflow: auto;
      margin-top: 43px;
      padding-left: 5px;
      width: 366px;
      height: 380px;
      box-sizing: border-box;
      .newsBoxOut {
        border-left: 1px dashed rgba(147, 153, 165, 0.6);
      }
    }
    .newsBox::-webkit-scrollbar {
      width: 9px;
    }
    .newsBox::-webkit-scrollbar-thumb {
      border-radius: 7px;
      -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
      background: #c1c1c1;
    }
    .newsBox::-webkit-scrollbar-track {
      -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: #fafafa;
    }
  }
}
</style>
